<template>
  <div>
    <loading :state="loading"></loading>
    <div class="edit">
      <cell-edit text-left="收货人名称" text-hint="点击输入" :text-default=user @getText="Name"></cell-edit>
      <cell-edit text-left="手机号" text-hint="点击输入" :text-default=phone @getText="Phone"></cell-edit>
      <div class="area">
        <div>所在地区</div>
        <div @click="chooseArea" class="choose">
          <span>{{province + city + area}}</span>
        </div>
      </div>
      <cell-edit text-left="详细地址" text-hint="点击输入" :text-default=detail @getText="Detail"></cell-edit>
    </div>
    <area-choose num="3" ref="areashow" v-on:getArea="getAreaData"/>
    <div class="out">
      <div class="btn-reverse" @click="toBuyAddress()">确认地址</div>
    </div>
  </div>
</template>

<script>
  import areaChoose from '../../components/common/areaChoose';
  import {Toast} from 'vant';
  import CellEdit from '../../components/sale/cellEdit.vue';

  export default {
    name: 'edit-address',
    components: {
      CellEdit,
      areaChoose
    },
    data() {
      return {
        user: '',
        phone: '',
        detail: '',
        type: '',
        id: '',
        province: '', // 省
        city: '', // 市
        area: '', // 区
        loading: false
      };
    },
    methods: {
      Name(data) {
        this.user = data;
      },
      chooseArea() {
        this.$refs.areashow.changeShow();
      },
      Phone(data) {
        this.phone = data;
      },
      Detail(data) {
        this.detail = data;
      },
      getAreaData(data) {
        this.$nextTick(function () {
          this.province = data.province;
          this.city = data.city;
          this.area = data.county;
        });
      },
      toBuyAddress() {
        let data = {};
        if (this.user === '') {
          Toast('请填写收货人');
        } else if (this.phone === '') {
          Toast('请填写手机号');
        } else if (this.detail === '') {
          Toast('请填写详细地址');
        } else {
          data.user = this.user;
          data.phone = this.phone;
          data.detail = this.detail;
          data.province = this.province;
          data.city = this.city;
          data.area = this.area;
          data.id = this.id;
          this.loading = true;
          this.$UserReq.address('create', data).then(res => {
            this.loading = false;
            this.$router.push('order-detail');
          }, () => {
            this.loading = false;
          });
        }
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    beforeCreate() {
      // 可以在这加个loading事件，在加载实例时触发
      // 这个阶段实例的data、methods是读不到的
    },
    created() {
      // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
      // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
      // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
    },
    beforeMount() {
      // 相关的 render 函数首次被调用。
    },
    mounted() {
      // 挂载元素，获取到DOM节点
      // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
    },
    beforeUpdate() {
      // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
    },
    updated() {
      //  如果对数据统一处理，在这里写上相应函数
      // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
    },
    beforeDestroy() {
      // 可以做一个确认停止事件的确认框
    },
    destroyed() {
      // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    }
  };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .edit
    padding vw(15) vw(15) vw(50)
    box-sizing border-box

  .area
    display flex
    justify-content space-between
    padding 0 vw(10)
    font-size word14
    background-color #fff
    height vw(40)
    line-height vw(40)
    margin-top vw(5)
    .r
      color main-color
    .choose
      margin-left 10px
      justify-content: flex-end;
      display: flex;
      flex: 1
      color #999
      span
        margin-right 10px
        color #000

  .sendTip
    flex-center()
    margin-left vw(62)
    margin-top vw(30)
    width vw(251)
    height vw(73)
    line-height 1.5
    word-vw(12, third-ash)
    text-align: center

  .send
    width vw(345)
    height vw(130)

  .out
    out()
    .btn-reverse
      btn-primary()
</style>
